import{d as e,M as i,A as d,h as c}from"./Anchors-CRD96j4l.js";import{D as s,a as n}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const h={path:"/nav/anchor",name:"anchor",title:"Anchor 锚点"};function r(l){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...l.components};return i(c,{children:[i("div",{class:"sys-ctx-main-left",children:[i(t.h1,{id:"sp-",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:e(t.span,{className:"icon icon-link"})}),h.title]}),i(t.h2,{id:"sp-demos",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:e(t.span,{className:"icon icon-link"})}),"代码演示 "]}),e(s,{}),e(n,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Anchor, Card, HView, View } from "cui-solid"

export default () => {
    return <HView>
        <View class="anchor-scroll-container" style={{height: '200px', overflow: 'auto', border: '1px solid #ccc'}}>
            <div id="basic_usage">
                <Card title={<a>基础用法</a>}>
                    <div style={{height: '600px'}} />
                </Card>
            </div>

            <div id="static_position">
                <Card title={<a>静态位置</a>}>
                    <div style={{height: '600px'}} />
                </Card>
            </div>

            <div id="API">
                <Card title={<a>API</a>}>
                    <div style={{height: '600px'}} />
                </Card>
            </div>

            <div id="Anchor_props">
                <Card title={<a>Anchor props</a>}>
                    <div style={{height: '600px'}} />
                </Card>
            </div>

            <div id="Anchor_events">
                <Card title={<a>Anchor_events</a>}>
                    <div style={{height: '600px'}} />
                </Card>
            </div>

            <div id="AnchorLink_props">
                <Card title={<a>AnchorLink_props</a>}>
                    <div style={{height: '600px'}} />
                </Card>
            </div>
        </View>
        <div style={{width: '200px', 'padding-left': '32px'}}>
            <Anchor mode="history" container={'.anchor-scroll-container'}>
                <Anchor.Link href="#basic_usage" title="Basic Usage" />
                <Anchor.Link href="#static_position" title="Static Position" />
                <Anchor.Link href="#API" title="API" />
                <Anchor.Link href="#Anchor_props" title="Anchor props" />
                <Anchor.Link href="#Anchor_events" title="Anchor events" />
                <Anchor.Link href="#AnchorLink_props" title="AnchorLink props" />
            </Anchor>
        </div>
    </HView>
}`,scopes:void 0,children:e(t.p,{children:"基础用法"})}),e(n,{id:"column",title:"分列",src:"2column.demo.tsx",code:`import { Anchor, Card, Col, HView, Row, View } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [currentAnchor, setCurrentAnchor] = createSignal<string>('');

    return <HView>
        <View class="anchor-scroll-container2" style={{height: '200px', overflow: 'auto', border: '1px solid #ccc'}}>
            <Row gutter={24}>
                <Col xs={1} lg={1} xl={0.5} style={{"position": "static"}}>
                    <div id="basic_usage2" classList={{'demo-anchor-active': currentAnchor() === 'basic_usage2'}}>
                        <Card title={<a>基础用法</a>} bordered>
                            <div style={{height: '300px'}} />
                        </Card>
                    </div>

                    <div id="API2" classList={{'demo-anchor-active': currentAnchor() === 'API2'}}>
                        <Card title={<a>API</a>} bordered>
                            <div style={{height: '400px'}} />
                        </Card>
                    </div>

                    <div id="Anchor_events2" classList={{'demo-anchor-active': currentAnchor() === 'Anchor_events2'}}>
                        <Card title={<a>Anchor_events</a>} bordered>
                            <div style={{height: '300px'}} />
                        </Card>
                    </div>
                </Col>
                <Col xs={1} lg={1} xl={0.5} style={{"position": "static"}}>
                    <div id="static_position2" classList={{'demo-anchor-active': currentAnchor() === 'static_position2'}}>
                        <Card title={<a>静态位置</a>} bordered>
                            <div style={{height: '600px'}} />
                        </Card>
                    </div>
                    <div id="Anchor_props2" classList={{'demo-anchor-active': currentAnchor() === 'Anchor_props2'}}>
                        <Card title={<a>Anchor props</a>} bordered>
                            <div style={{height: '600px'}} />
                        </Card>
                    </div>
                    <div id="AnchorLink_props2" classList={{'demo-anchor-active': currentAnchor() === 'AnchorLink_props2'}}>
                        <Card title={<a>AnchorLink_props</a>} bordered>
                            <div style={{height: '600px'}} />
                        </Card>
                    </div>
                </Col>
            </Row>
        </View>
        <div style={{width: '200px', 'padding-left': '32px'}}>
            <Anchor mode="history" container={'.anchor-scroll-container2'} onChange={(key) => {
                setCurrentAnchor(key)
            }}>
                <Anchor.Link href="#basic_usage2" title="Basic Usage" />
                <Anchor.Link href="#static_position2" title="Static Position" />
                <Anchor.Link href="#API2" title="API" />
                <Anchor.Link href="#Anchor_props2" title="Anchor props" />
                <Anchor.Link href="#Anchor_events2" title="Anchor events" />
                <Anchor.Link href="#AnchorLink_props2" title="AnchorLink props" />
            </Anchor>
        </div>
    </HView>
}`,scopes:void 0,children:e(t.p,{children:"分列"})}),i(t.h2,{id:"props",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:e(t.span,{className:"icon icon-link"})}),"属性 "]}),i(t.table,{className:"sp-table",children:[e(t.thead,{children:i(t.tr,{children:[e(t.th,{style:{textAlign:"left"},children:"属性"}),e(t.th,{style:{textAlign:"left"},children:"说明"}),e(t.th,{style:{textAlign:"left"},children:"类型"}),e(t.th,{style:{textAlign:"left"},children:"默认值"})]})}),i(t.tbody,{children:[i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"classList"}),e(t.td,{style:{textAlign:"left"},children:"自定义class"}),e(t.td,{style:{textAlign:"left"},children:"Object"}),e(t.td,{style:{textAlign:"left"},children:"-"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"class"}),e(t.td,{style:{textAlign:"left"},children:"自定义class"}),e(t.td,{style:{textAlign:"left"},children:"string"}),e(t.td,{style:{textAlign:"left"},children:"-"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"container"}),e(t.td,{style:{textAlign:"left"},children:"容器"}),e(t.td,{style:{textAlign:"left"},children:"string  |  HTMLElement"}),e(t.td,{style:{textAlign:"left"}})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"scrollContainer"}),e(t.td,{style:{textAlign:"left"},children:"滚动容器"}),e(t.td,{style:{textAlign:"left"},children:"string  |  HTMLElement"}),e(t.td,{style:{textAlign:"left"}})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"scrollOffset"}),e(t.td,{style:{textAlign:"left"},children:"滚动偏移量"}),e(t.td,{style:{textAlign:"left"},children:"number"}),e(t.td,{style:{textAlign:"left"}})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"offsetTop"}),e(t.td,{style:{textAlign:"left"},children:"偏移量"}),e(t.td,{style:{textAlign:"left"},children:"number"}),e(t.td,{style:{textAlign:"left"}})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"bounds"}),e(t.td,{style:{textAlign:"left"},children:"触发的容量"}),e(t.td,{style:{textAlign:"left"},children:"number"}),e(t.td,{style:{textAlign:"left"},children:"5"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"showInk"}),e(t.td,{style:{textAlign:"left"},children:"显示高亮条"}),e(t.td,{style:{textAlign:"left"},children:"boolean"}),e(t.td,{style:{textAlign:"left"},children:"false"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"mode"}),e(t.td,{style:{textAlign:"left"},children:"使用的模式"}),e(t.td,{style:{textAlign:"left"},children:"hash | history"}),e(t.td,{style:{textAlign:"left"},children:"hash"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"onChange"}),e(t.td,{style:{textAlign:"left"},children:"锚点点击触发事件"}),e(t.td,{style:{textAlign:"left"},children:"Function"}),e(t.td,{style:{textAlign:"left"}})]})]})]}),i(t.h2,{id:"item_props",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#item_props",children:e(t.span,{className:"icon icon-link"})}),"Link属性 "]}),i(t.table,{className:"sp-table",children:[e(t.thead,{children:i(t.tr,{children:[e(t.th,{style:{textAlign:"left"},children:"属性"}),e(t.th,{style:{textAlign:"left"},children:"说明"}),e(t.th,{style:{textAlign:"left"},children:"类型"}),e(t.th,{style:{textAlign:"left"},children:"默认值"})]})}),i(t.tbody,{children:[i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"href"}),e(t.td,{style:{textAlign:"left"},children:"锚点链接"}),e(t.td,{style:{textAlign:"left"},children:"string"}),e(t.td,{style:{textAlign:"left"},children:"-"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"title"}),e(t.td,{style:{textAlign:"left"},children:"锚点标题"}),e(t.td,{style:{textAlign:"left"},children:"string | JSXElement"}),e(t.td,{style:{textAlign:"left"},children:"-"})]})]})]}),i(t.h2,{id:"events",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:e(t.span,{className:"icon icon-link"})}),"事件 "]}),i(t.table,{className:"sp-table",children:[e(t.thead,{children:i(t.tr,{children:[e(t.th,{style:{textAlign:"left"},children:"事件名称"}),e(t.th,{style:{textAlign:"left"},children:"说明"}),e(t.th,{style:{textAlign:"left"},children:"返回值"})]})}),e(t.tbody,{children:i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:e(t.code,{className:"sp-inline-code",children:"onChange"})}),e(t.td,{style:{textAlign:"left"},children:"锚点点击触发事件"}),e(t.td,{style:{textAlign:"left"},children:"key"})]})})]})]}),`
`,`
`,`
`,e(d,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"column",title:"分列",src:"2column.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"item_props",depth:2,title:"Link属性"},{id:"events",depth:2,title:"事件"}]})]})}function p(l={}){const{wrapper:t}=l.components||{};return t?e(t,{...l,children:e(r,{...l})}):r(l)}export{p as default,h as frontmatter};
